<template>
  <div class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title">
          <i class="el-icon-search" />搜索栏
        </template>
        <div class="head-container">
          <el-form :model="params" :inline="true" size="mini" label-width="auto" @keyup.enter.native="toQuery">
            <el-form-item label="部门:">
              <el-select v-model="params.deptNbr" placeholder="请选择" clearable filterable style="width: 130px;" class="filter-item">
                <el-option v-for="item in deptList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="Fineline号:">
              <el-input v-model="params.finelineNbr" placeholder="请输入" clearable style="width: 130px;" class="filter-item" />
            </el-form-item>
            <el-form-item>
              <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">查询</el-button>
              <el-button class="filter-item" size="mini" type="primary" icon="el-icon-refresh" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div style="padding-top:5px">
      <el-button class="filter-item" size="mini" type="danger" style="float:right;margin-bottom:5px;margin-left:5px;" icon="el-icon-remove" @click="batchDelete">删除</el-button>
      <el-button class="filter-item" size="mini" type="success" style="float:right;margin-bottom:5px;margin-left:5px;" icon="el-icon-circle-plus" @click="toAdd">新增</el-button>
      <el-button size="mini" type="primary" style="float:right;margin-bottom:5px;" icon="el-icon-refresh" @click="resetForm">刷新</el-button>
      <el-table
        ref="vendorInfoTable"
        :data="data"
        :row-key="getRowKeys"
        size="small"
        border
        style="width: 100%;"
        :height="tableHeight"
        :row-class-name="tableRowClassName"
        @row-click="rowClick"
        @row-dblclick="rowDoubleClick"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column :reserve-selection="true" type="selection" align="center" width="55" />
        <el-table-column :show-overflow-tooltip="true" label="流水号" sortable prop="id" :min-width="colWidths.id ? colWidths.id : 100" />
        <el-table-column :show-overflow-tooltip="true" label="部门" prop="deptNbr" sortable :min-width="colWidths.deptNbr ? colWidths.deptNbr : 100" />
        <el-table-column :show-overflow-tooltip="true" label="Finelina号" prop="finelineNbr" :min-width="colWidths.finelineNbr ? colWidths.finelineNbr : 120" />
        <el-table-column :show-overflow-tooltip="true" label="供应商号" prop="contentVendorInfo.vendorNbr" :min-width="colWidths.vendorNbr ? colWidths.vendorNbr : 120" />
        <el-table-column :show-overflow-tooltip="true" label="供应商名称" prop="contentVendorInfo.vendorName" :min-width="colWidths.vendorName ? colWidths.vendorName : 120" />
        <el-table-column :show-overflow-tooltip="true" label="联系方式" prop="contentVendorInfo.companyTels" :min-width="colWidths.companyTels ? colWidths.companyTels : 100" />
        <el-table-column :show-overflow-tooltip="true" label="更新时间" prop="updatedTime" :min-width="colWidths.updatedTime ? colWidths.updatedTime : 100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updatedTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="operation" min-width="120">
          <template slot-scope="scope">
            <el-link type="primary" @click="toView(scope.row)">查看</el-link>
            <el-divider direction="vertical" />
            <el-link type="warning" @click="toEdit(scope.row)">修改</el-link>
            <el-divider direction="vertical" />
            <el-link type="danger" @click="toDelete(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        v-if="total > 10"
        :total="total"
        :current-page.sync="currentPage"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
    <edit ref="edit" :parent="currentObj" />
  </div>
</template>

<script>
import initData from '@/api/coi/commonInitData'
import edit from '@/views/coi/configuration/pb-mapping/edit'
import { showNameByValue } from '@/utils/selectUtil'
import { getAppConfig } from '@/utils/localStore'
import { deleteOne, batchDelete } from '@/api/coi/configuration/pb-vendor-mapping/pb-vendor-mapping'
import { findDeptAll } from '@/api/coi/configuration/content-vendor/dept'
import { messageShowTool } from '@/utils/messageUtil'
import lStorage from '@/utils/lStorage'
import { parseTime } from '@/utils/index'

export default {
  components: { edit },
  mixins: [initData],
  data() {
    return {
      ids: [],
      currentObj: this,
      activeName: '1',
      tableHeight: window.innerHeight * 0.55,
      deptList: [{}],
      baseUrl: getAppConfig().coiBuyerConfigBaseUrl
    }
  },
  watch: {
    data: {
      handler(n, o) {
        this.$nextTick(() => {
          this.doLayout()
        })
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.doLayout, true)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.doLayout, true)
  },
  created() {
    this.$nextTick(() => {
      this.init()
      this.initDeptList()
    })
  },
  methods: {
    showNameByValue,
    messageShowTool,
    parseTime,
    doLayout() {
      this.$refs.vendorInfoTable.doLayout()
    },
    beforeInit() {
      this.url = process.env.VUE_APP_BASE_API7 + '/pb-vendor/queryPage'
      this.params.pageNum = this.page
      this.params.pageSize = this.size
      return true
    },
    rowClick(row) {
      this.$refs.vendorInfoTable.clearSelection(this.ids)
      this.$refs.vendorInfoTable.toggleRowSelection(row, true)
    },
    rowDoubleClick(row) {
      this.toEdit(row)
    },
    // 列表排序触发
    sortChange(val) {
      const sortCol = val.prop.replace(/([A-Z])/g, '_$1').toUpperCase()
      let sortType = ''
      if (val.order === 'descending') {
        sortType = ' DESC'
      } else if (val.order === 'ascending') {
        sortType = ' ASC'
      }
      this.params.sort = sortCol + sortType
      this.init()
    },
    // 初始化部门
    initDeptList() {
      const item = lStorage.getItem('deptList')
      if (item === false) {
        findDeptAll().then(res => {
          if (res) {
            this.deptList = res.result
            lStorage.setItem('deptList', this.deptList)
          }
        })
      } else {
        this.deptList = item.value
      }
    },
    // 查询
    toQuery() {
      this.params.pageNum = 0
      this.init()
    },
    // 新增
    toAdd() {
      const edit = this.$refs.edit
      edit.title = '新增'
      edit.contentVendorDivTitle = '请选择一个文描供应商'
      edit.currentOperate = 'ADD'
      edit.finelineOptions = []
      edit.init()
      edit.initPBVendorMappingData()
      edit.dialog = true
      console.log('toadd')
    },
    // 修改
    toEdit(row) {
      const edit = this.$refs.edit
      const pbMappingInfo = JSON.parse(JSON.stringify(row))
      edit.title = '修改文描供应商信息'
      edit.contentVendorDivTitle = '请选择一个文描供应商'
      edit.currentOperate = 'EDIT'
      edit.queryFinelineByDept(pbMappingInfo.deptNbr)
      edit.pbVendorMappingInfo = pbMappingInfo
      edit.init()
      edit.dialog = true
      this.$nextTick(() => {
        edit.$refs.contentVendorTab.toggleRowSelection(pbMappingInfo.contentVendorInfo, true)
      })
      console.log('toedit')
    },
    // 查看
    toView(row) {
      const edit = this.$refs.edit
      const pbMappingInfo = JSON.parse(JSON.stringify(row))
      edit.title = '查看文描供应商信息'
      edit.contentVendorDivTitle = '已配置的文描供应商'
      edit.currentOperate = 'VIEW'
      edit.queryFinelineByDept(pbMappingInfo.deptNbr)
      edit.pbVendorMappingInfo = pbMappingInfo
      edit.pbVendorMappingInfo.selectedFinelineNbrs = pbMappingInfo.selectedFinelineNbrs
      const contentVendorInfoArray = []
      contentVendorInfoArray.push(pbMappingInfo.contentVendorInfo)
      edit.data = contentVendorInfoArray
      edit.dialog = true
    },
    // 查询栏重置触发
    resetForm() {
      this.params = { }
      this.toQuery()
    },
    // 列表多选框触发
    handleSelectionChange(val) {
      this.ids = []
      val.forEach(ele => {
        this.ids.push(ele.id)
      })
    },
    // 翻页选择row的key值
    getRowKeys(row) {
      return row.id
    },
    // 删除
    toDelete(row) {
      console.log('delete:' + row.id)
      var _this = this
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOne(row.id).then(res => {
          if (res && res.code === '0') {
            _this.messageShowTool('删除成功！', 'success')

            _this.toQuery()
            this.$refs.allowanceTable.clearSelection(_this.ids) // 清空多选框
          }
        })
      })
    },
    // 批量删除
    batchDelete() {
      var _this = this
      if (this.ids.length <= 0) {
        this.messageShowTool('请选择删除项!', 'warning')

        return
      }
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        batchDelete(this.ids).then(res => {
          if (res && res.code === '0') {
            _this.messageShowTool('删除成功！', 'success')

            _this.toQuery()
            this.$refs.allowanceTable.clearSelection(_this.ids) // 清空多选框
          }
        })
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'bg-row'
      }
      return ''
    }
  }
}
</script>
<style scoped>
  .app-container {
    padding-top: 20px;
  }
  .app-container >>> .el-collapse-item__content {
    padding-bottom: 0px;
    padding-top: 10px;
  }
  .app-container >>> .el-form-item--small.el-form-item {
    margin-bottom: 0px
  }
  .app-container >>> .head-container {
    margin-bottom: 0;
    padding-bottom: 5px
  }
  .app-container >>> .el-table--small td {
    padding: 5px 0
  }
  .app-container >>> .filter-item {
    margin-bottom: 0
  }
  .app-container >>> .el-table .bg-row {
    background: rgb(243, 252, 246);
  }
</style>
